<template>
  <div class="demo-container">
    <div class="demo-header">
      <h1 class="demo-title">现代化设计展示</h1>
      <p class="demo-subtitle">Vue 3 + Element Plus + 现代化设计系统</p>
    </div>

    <div class="demo-grid">
      <!-- 基础卡片 -->
      <modern-card 
        title="基础卡片" 
        icon="Document"
        type="default"
        :hover="true"
      >
        <p>这是一个基础的现代化卡片组件，支持悬停效果和多种主题。</p>
        
        <template #footer>
          <el-button type="primary" size="small">
            <el-icon><Edit /></el-icon>
            编辑
          </el-button>
          <el-button size="small">
            <el-icon><View /></el-icon>
            查看
          </el-button>
        </template>
      </modern-card>

      <!-- 主要卡片 -->
      <modern-card 
        title="主要功能" 
        icon="MagicStick"
        type="primary"
        :elevated="true"
      >
        <div class="feature-list">
          <div class="feature-item">
            <el-icon class="feature-icon"><Check /></el-icon>
            <span>智能代码生成</span>
          </div>
          <div class="feature-item">
            <el-icon class="feature-icon"><Check /></el-icon>
            <span>多框架支持</span>
          </div>
          <div class="feature-item">
            <el-icon class="feature-icon"><Check /></el-icon>
            <span>一键部署</span>
          </div>
        </div>

        <template #actions>
          <el-tag type="success" size="small">推荐</el-tag>
        </template>
      </modern-card>

      <!-- 成功卡片 -->
      <modern-card 
        title="执行结果" 
        icon="SuccessFilled"
        type="success"
      >
        <div class="result-stats">
          <div class="stat">
            <div class="stat-number">98%</div>
            <div class="stat-label">成功率</div>
          </div>
          <div class="stat">
            <div class="stat-number">1.2s</div>
            <div class="stat-label">平均耗时</div>
          </div>
        </div>
      </modern-card>

      <!-- 警告卡片 -->
      <modern-card 
        title="系统警告" 
        icon="Warning"
        type="warning"
      >
        <el-alert
          title="注意事项"
          type="warning"
          description="请确保数据库连接正常，否则可能影响代码生成功能。"
          :closable="false"
          show-icon
        />
      </modern-card>

      <!-- 信息卡片 -->
      <modern-card 
        title="技术栈" 
        icon="InfoFilled"
        type="info"
      >
        <div class="tech-stack">
          <el-tag class="tech-tag" v-for="tech in techStack" :key="tech.name" :type="tech.type">
            {{ tech.name }}
          </el-tag>
        </div>
      </modern-card>

      <!-- 交互卡片 -->
      <modern-card 
        title="快速操作" 
        icon="Lightning"
        type="primary"
        :interactive="true"
        @click="handleQuickAction"
      >
        <div class="quick-actions">
          <el-button-group>
            <el-button type="primary" size="small">
              <el-icon><Plus /></el-icon>
              新建
            </el-button>
            <el-button size="small">
              <el-icon><Download /></el-icon>
              导入
            </el-button>
            <el-button size="small">
              <el-icon><Upload /></el-icon>
              导出
            </el-button>
          </el-button-group>
        </div>
      </modern-card>
    </div>

    <!-- 数据展示区域 -->
    <modern-card 
      title="数据表格" 
      icon="Grid"
      class="mt-lg"
      :no-padding="true"
    >
      <template #actions>
        <el-button type="primary" size="small">
          <el-icon><Plus /></el-icon>
          添加数据
        </el-button>
      </template>

      <el-table :data="tableData" style="width: 100%">
        <el-table-column prop="name" label="名称" width="180" />
        <el-table-column prop="type" label="类型" width="120">
          <template #default="scope">
            <el-tag :type="getTypeColor(scope.row.type)" size="small">
              {{ scope.row.type }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="status" label="状态" width="100">
          <template #default="scope">
            <el-switch v-model="scope.row.status" />
          </template>
        </el-table-column>
        <el-table-column prop="description" label="描述" />
        <el-table-column label="操作" width="200">
          <template #default="scope">
            <el-button type="primary" size="small" text>
              <el-icon><Edit /></el-icon>
              编辑
            </el-button>
            <el-button type="danger" size="small" text>
              <el-icon><Delete /></el-icon>
              删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </modern-card>
  </div>
</template>

<script>
import { 
  Document, 
  Edit, 
  View, 
  MagicStick, 
  Check, 
  SuccessFilled, 
  Warning, 
  InfoFilled, 
  Lightning, 
  Plus, 
  Download, 
  Upload, 
  Grid, 
  Delete 
} from '@element-plus/icons-vue'

export default {
  name: 'Demo',
  components: {
    Document,
    Edit,
    View,
    MagicStick,
    Check,
    SuccessFilled,
    Warning,
    InfoFilled,
    Lightning,
    Plus,
    Download,
    Upload,
    Grid,
    Delete
  },
  data() {
    return {
      techStack: [
        { name: 'Vue 3', type: 'success' },
        { name: 'Element Plus', type: 'primary' },
        { name: 'TypeScript', type: 'info' },
        { name: 'Vite', type: 'warning' },
        { name: 'Pinia', type: '' }
      ],
      tableData: [
        {
          name: '用户管理',
          type: 'CRUD',
          status: true,
          description: '用户信息的增删改查功能'
        },
        {
          name: '权限控制',
          type: 'AUTH',
          status: true,
          description: '基于角色的权限控制系统'
        },
        {
          name: '数据统计',
          type: 'REPORT',
          status: false,
          description: '各种业务数据的统计报表'
        },
        {
          name: '系统配置',
          type: 'CONFIG',
          status: true,
          description: '系统参数和配置管理'
        }
      ]
    }
  },
  methods: {
    handleQuickAction() {
      this.$message({
        message: '快速操作被触发！',
        type: 'success',
        duration: 2000
      })
    },
    getTypeColor(type) {
      const colorMap = {
        'CRUD': 'primary',
        'AUTH': 'success',
        'REPORT': 'warning',
        'CONFIG': 'info'
      }
      return colorMap[type] || ''
    }
  }
}
</script>

<style lang="scss" scoped>
.demo-container {
  padding: var(--spacing-xl);
  max-width: 1400px;
  margin: 0 auto;
}

.demo-header {
  text-align: center;
  margin-bottom: var(--spacing-xl);

  .demo-title {
    font-size: 2.5rem;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: var(--spacing-sm);
    background: var(--primary-gradient);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
  }

  .demo-subtitle {
    font-size: 1.2rem;
    color: var(--text-secondary);
    margin: 0;
  }
}

.demo-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
  gap: var(--spacing-lg);
  margin-bottom: var(--spacing-xl);

  @media (max-width: 768px) {
    grid-template-columns: 1fr;
  }
}

.feature-list {
  .feature-item {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    margin-bottom: var(--spacing-sm);

    .feature-icon {
      color: var(--success-color);
      font-size: 16px;
    }
  }
}

.result-stats {
  display: flex;
  justify-content: space-around;
  text-align: center;

  .stat {
    .stat-number {
      font-size: 2rem;
      font-weight: 700;
      color: var(--success-color);
      margin-bottom: var(--spacing-xs);
    }

    .stat-label {
      font-size: 0.9rem;
      color: var(--text-secondary);
    }
  }
}

.tech-stack {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-sm);

  .tech-tag {
    cursor: pointer;
    transition: var(--transition-base);

    &:hover {
      transform: scale(1.05);
    }
  }
}

.quick-actions {
  text-align: center;
}

// 工具类
.mt-lg {
  margin-top: var(--spacing-lg);
}
</style>